<template>
  <div>
    <!--        <div class="yb_tishi fon_14 t_l color_3">独立版跳转链接：<a :href="path" target="_blank">{{path}}</a></div>-->
    <div class="yb_tishi fon_14 t_l color_3">
      商户后台登录链接：
      <span @click="chickLogin" class="subjectcolor2 curs">{{path}}</span>
    </div>
    <div class="about mar_t20">
      <div class="title fon_16 wei t_l ba_f pad_20">账号信息</div>
      <div class="ba_f pad_20">
        <el-form ref="ruleForm" :model="ruleForm" status-icon label-width="180px" class="demo-ruleForm">
          <el-form-item label="头像" prop="icon">
            <div class="uploadSource bor_de rel flex" v-if="ruleForm.portrait">
              <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                <i class="el-icon-check" ref="imgicon1"></i>
                <i class="el-icon-close" @click="deleteMultiImage(ruleForm.portrait,1)"></i>
              </label>
              <img :src="ruleForm.portrait" @click="test(1)" class="wid" />
            </div>
            <div class="uploadSource flex-center curs" v-else @click="test(1)">
              <i class="el-icon-plus fon_40 color_d9"></i>
            </div>
            <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
          </el-form-item>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model.number="ruleForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="pass">
            <el-input type="password" v-model="ruleForm.passWord" :disabled="disabled" autocomplete="off"></el-input>
            <el-button type="text" class="mar_l20" @click="handleEdit(ruleForm,'password',ruleForm.passWord)">修改</el-button>
          </el-form-item>
          <el-form-item label="绑定手机号" prop="phone">
            <el-input v-model.number="ruleForm.phone" :disabled="disabled" type="number"></el-input>
            <el-button type="text" class="mar_l20" @click="handleEdit2(ruleForm,'userTel',ruleForm.phone)">修改</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="mar_t20 ba_f pad_20 t_c">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </div>
    <ggedit ref="ggedit" @fetchData="init"></ggedit>
  </div>
</template>
<script>
import Ggedit from './components/numberedit';
import attachmentImg from '@/plugins/attachment-img';
import { getUserInfo, userSave } from '@/api/setup';
import index from '../../api/index';
export default {
  components: { Ggedit, attachmentImg },
  created() {
    this.bus.$emit('loading', true);
    this.init();
  },
  data() {
    return {
      ruleForm: {
        portrait: '',
        userName: ''
      },
      path: '',
      disabled: ''
    };
  },
  methods: {
    async init() {
      const { data } = await getUserInfo();
      if (data) {
        // console.log('123')
        this.disabled = true;
        // this.ruleForm.userTel = data.phone
        this.ruleForm = Object.assign({}, data);
      } else if (data == false) {
        // console.log(2354)
        this.disabled = data;
      }
      this.bus.$emit('loading', false);
      const publishUrl = 'https://bkycms.com/addons/yb_wm/views/channel/index/index.html#/login';
      const backendPath = index.isDev ? publishUrl : location.href.match(/(\S*)views/)[1] + 'views/channel/index/index.html#/login';
      this.path = backendPath;
    },
    handleEdit(form, type, value) {
      if (value && this.disabled) {
        if (form) {
          this.$refs['ggedit'].showEdit(form, type);
        } else {
          this.$refs['ggedit'].showEdit();
        }
      } else {
        this.$baseMessage('请先设置并保存密码', 'warning');
      }
    },
    handleEdit2(form, type, value) {
      if (form) {
        this.$refs['ggedit'].showEdit(form, type);
      } else {
        this.$refs['ggedit'].showEdit();
      }
      // if(value && this.disabled){
      //     if (form) {
      //         this.$refs["ggedit"].showEdit(form,type);
      //     } else {
      //         this.$refs["ggedit"].showEdit();
      //     }
      // }else{
      //     this.$baseMessage('请先设置并保存手机号码', "warning");
      // }
    },
    test(i = 0) {
      console.log(this.$refs, i);
      this.$refs['img' + i].dialogVisible = true;
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    imgadd1(url) {
      this.ruleForm.portrait = url.str;
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (!type) {
        switch (index) {
          case 1:
            this.ruleForm.portrait = '';
            break;
        }
      }
    },
    chickLogin() {
      // this.$router.push({path: '/login'})
      let routeData = this.$router.resolve({ path: '/login', query: {} });
      window.open(routeData.href, '_blank');
    },
    submitForm() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          if (this.disabled) {
            this.$delete(this.ruleForm, 'passWord');
            this.$delete(this.ruleForm, 'phone');
          }
          const { msg } = await userSave(this.ruleForm);
          this.$baseMessage(msg, 'success');
          this.init();
          var sessionStore = window.sessionStorage;
          sessionStore.removeItem('topMenu');
          sessionStore.removeItem('leftMenu');
        } else {
          return false;
        }
      });
    }
  }
};
</script>
